<template>
  <div class="input-container">
    <img class="img" src="/title/search.png" alt="" @click="search" />
    <input class="input" type="text" placeholder="搜索" v-model.trim="keyword" @keydown.enter="search" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const keyword = ref('');
function search() {
  if (!keyword.value) return;
  localStorage.setObject('keyword', keyword.value);
  router.push({ name: 'SearchPage', query: { keyword: keyword.value } });
}
</script>

<style scoped lang="scss">
.input-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 210px;
  background-color: rgb(242, 242, 243);
  padding-left: 10px;
  border-radius: 10px;
  overflow: hidden;

  .img {
    position: absolute;
    width: 18px;
    height: auto;
    object-fit: contain;
    margin-right: 5px;
    -webkit-app-region: no-drag;
  }

  .input {
    width: 210px;
    border: none;
    -webkit-app-region: no-drag;
    outline: none;
    padding-left: 30px;
    background-color: rgb(242, 242, 243);
  }
}
</style>
